<template>
  <el-dialog class="add_dialog" width="600px" :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-form ref="form" :rules="rules" :model="form" label-width="90px">
      <el-form-item label="轮播图:" prop="banner_img">
        <!-- dialog-width="1000px"
          cropper-height="400px"
          :auto-crop-width="960"
          :auto-crop-height="215"
          :enlarge="2" -->
        <crop-upload accept=".jpg,.png" :init-val="form.banner_img" file-size="1M" wrapper-width="100%" wrapper-height="100px" :img-width="1920" :img-height="430" tip="图片格式JPG、PNG等格式，图片大小不可超过1M，" sub-tip="尺寸要求：宽度1920像素，高度430像素。" @setVal="(val) => setUrl(val)" />
      </el-form-item>
      <el-form-item label="链接类型:">
        <el-radio v-model="form.jump_type" :label="1">商品</el-radio>
        <el-radio v-model="form.jump_type" :label="2">页面</el-radio>
      </el-form-item>
      <el-form-item v-if="form.jump_type == 2" label="页面外链:">
        <el-input v-model="form.link_url" style="width:100%" placeholder="请输入带有http://或https://的网址链接" />
      </el-form-item>
      <el-form-item v-if="form.jump_type == 1" label="产品链接:">
        <div class="flex align-center justify-between link_wrapper">
          <p class="flex-1 text-ellipsis">{{ urlName }}</p>
          <el-link type="primary" :underline="false" @click.native="openSelect">{{ form.banner_url && urlName ? "更改" : "添加链接" }}</el-link>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
    <goods-dialog ref="goodsDialog" :show-cate="false" :append-to-body="true" :show-checked-tool="true" @setSelect="setSelect" />
  </el-dialog>
</template>

<script>
import goodsDialog from '@/components/goodsDialog'
import { addBanner, getBannerById } from '@/api/recommend'
import cropUpload from '@/components/cropUpload'
export default {
  components: { goodsDialog, cropUpload },
  // props: ['editId'],
  props: {
    editId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      urlName: '',
      form: {
        banner_img: '',
        banner_url: '',
        jump_type: 1,
        link_url: ''
      },
      rules: {
        banner_img: [
          { required: true, message: '请上传轮播图', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.editId ? '编辑轮播图' : '添加轮播图'
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.reset()
        if (this.editId) {
          this.getData()
        }
      }
    }
  },
  methods: {
    setUrl(val) {
      this.form.banner_img = val
    },
    // 提交
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.jump_type === 2) {
            this.form.banner_url = this.form.link_url
          }
          // console.log(this.form)
          addBanner({
            banner_type: 3,
            ...this.form
          }).then(res => {
            this.dialogVisible = false
            this.$emit('getList')
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    // 设置选中的商品
    setSelect(goodsList) {
      const obj = goodsList[0]
      this.form.banner_url = obj.goods_id
      this.urlName = obj.title
    },
    // 打开商品选择对话框
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = this.form.banner_url ? [{ goods_id: this.form.banner_url, title: this.urlName }] : []
    },
    reset() {
      this.urlName = ''
      this.form = {
        banner_img: '',
        banner_url: '',
        jump_type: 1,
        link_url: ''
      }
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
      })
    },
    // 获取轮播图数据
    getData() {
      getBannerById(this.editId).then(res => {
        this.form.banner_id = res.id
        this.form.jump_type = res.jump_type
        this.form.banner_img = res.banner_img
        if (this.form.jump_type === 1) {
          this.form.banner_url = res.banner_url
          this.form.link_url = ''
        } else {
          this.form.link_url = res.banner_url
          this.form.banner_url = ''
        }
        this.urlName = res.goods_name
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.link_wrapper {
  height: 40px;
  border: 1px solid #eeeeee;
  border-radius: 3px;

  &>p {
    padding: 0 10px;
  }

  .el-link {
    margin: 0 10px;
  }
}

.img-uploader-img {
  height: 100px;
}
</style>
